Como o HTML 5 pretende revolucionar a forma como desenvolvemos aplicativos, sejam eles para web, iPhone/iPad ou sistemas na Nuvem.

1. Como o HTML5 pretende revolucionar a forma
como desenvolvemos aplicativos, sejam eles para
web, iPhone/iPad ou sistemas na Nuvem.
por Cleiton Francisco

2. Cleiton Francisco
Gerente de Tecnologia
do Jus Navigandi
cleitonfco@gmail.com
Twitter: @cleitonfco
não... eu ainda não trabalho no Google

3. HTML 4

4. HTML 5

7. HTML 5 no Google IO

8. Polêmica: Flash X HTML 5

9. http://blogdoiphone.com/2010/04/steve-jobs-publica-carta-
aberta-explicando-a-relacao-entre-apple-e-adobe/

10. O que o HTML 5 tem de
novidade?

11. Áudio

12. <audio controls>
<source src="demo-audio.ogg" />
<source src="demo-audio.mp3" />
</audio>

13. Vídeo

14. <video width="320" height="240" controls
preload="none" poster="videoframe.jpg">
<source src="demo-video.mp4"
type="video/mp4" />
<source src="demo-video.ogv"
type="video/ogg" />
</video>

15. Referências
http://dev.opera.com/articles/view/everything-you-need-
to-know-about-html5-video-and-audio/
http://www.webmonkey.com/2010/02/
embed_audio_and_video_in_html_5_pages/
http://html5doctor.com/native-audio-in-the-browser/
http://diveintohtml5.org/video.html

16. Canvas / SVG

17. Referências
http://imasters.uol.com.br/artigo/16455/
desenvolvimento/html_5_na_pratica_canvas_parte_01/
http://diveintohtml5.org/canvas.html
http://tai-dev.blog.co.uk/2009/07/17/a-quick-test-of-
the-html5-geolocation-api-with-firefox-3-5-spookily-
accurate-on-my-work-pc-6533920/
http://www.alistapart.com/articles/get-ready-for-html-5/
http://srcware.com/programacao/html-5-introducao-a-
tag-canvas/
http://realtech.burningbird.net/painting-the-web/svg/
svg-html

18. Geolocation

19. Onde estou?
http://www.mozilla.com/firefox/geolocation/

20. Referências
http://maxheapsize.com/2009/04/11/getting-the-
browsers-geolocation-with-html-5/
http://html5demos.com/geo
http://tai-dev.blog.co.uk/2009/07/17/a-quick-test-of-
the-html5-geolocation-api-with-firefox-3-5-spookily-
accurate-on-my-work-pc-6533920/

21. Banco de Dados

22. Referências
http://net.tutsplus.com/tutorials/html-css-techniques/
quick-tip-learning-about-html5-local-storage/
http://www.thecssninja.com/javascript/how-to-create-
offline-webapps-on-the-iphone
http://www.webreference.com/authoring/languages/
html/HTML5-Client-Side/
http://dev.w3.org/html5/webstorage/

23. Novos elementos
(semânticos)

24. Novos elementos
(semânticos)

25. Novos elementos
(semânticos)

26. Referências
http://blog.whatwg.org/supporting-new-elements-in-ie
http://html5doctor.com/the-figure-figcaption-elements/
http://html5doctor.com/why-designers-should-care-
about-html5/
http://www.brucelawson.co.uk/2010/html5-articles-and-
sections-whats-the-difference/
http://orderedlist.com/our-writing/resources/html-css/
structural-tags-in-html5/

27. Formulários
mais inteligentes
color, email, date, month, week, time,
datetime, number, range, search, tel, url

28. Referências
http://24ways.org/2009/have-a-field-day-with-html5-
forms
http://www.456bereastreet.com/archive/201004/
html5_input_types/
http://net.tutsplus.com/tutorials/html-css-techniques/
rethinking-forms-in-html5/
http://diveintohtml5.org/forms.html

29. Browsers

30. http://html5readiness.com

31. Perguntas?

32. Cleiton Francisco
cleitonfco@gmail.com
Twitter: @cleitonfco